<template>
  <div>
    <el-table :data="props.tableData" style="width: 100%">
      <template v-for="item in props.tabData">
        <template v-if="item.type == 'Date'">
          <el-table-column #default="scope" :label="item.label" :width="item.width ? item.width : ''">
            <div>{{ dayjs(scope.row[item.fixed]).format(item.timeType) }}</div>
          </el-table-column>
        </template>
        <template v-else-if="item.type == 'img'">
          <el-table-column #default="scope" :label="item.label" :width="item.width ? item.width : ''">
            <!-- <div>{{scope.row[item.fixed]}}</div> -->
            <el-image style="width: 60px;
                         height: 60px" :src="scope.row[item.fixed]" :preview-src-list="scope.row[item.fixed].split(' ')"
              :z-index="6" fit="cover" :preview-teleported="true" />
          </el-table-column>
        </template>
        <template v-else-if="item.type == 'slot'">
          <el-table-column #default="scope" :label="item.label" :width="item.width ? item.width : ''">
            <!-- <div>{{scope.row[item.fixed]}}</div> -->
            <slot :name="item.fixed" :scope="scope.row"></slot>
          </el-table-column>
        </template>
        <template v-else-if="item.type == 'btn'">
          <el-table-column #default="scope" fixed="right" :label="item.label" :width="item.width ? item.width : ''">
            <el-button type="primary" @click="onclick(scope, '0')">编辑</el-button>
            <el-button type="danger" @click="onclick(scope, '1')">删除</el-button>
          </el-table-column>
        </template>
        <template v-else>
          <el-table-column :prop="item.fixed" :label="item.label" :width="item.width ? item.width : ''" />
        </template>
      </template>
    </el-table>

  </div>
  <div class="page"><el-pagination v-model:current-page="page.offset" v-model:page-size="page.limit"
      :page-sizes="[10, 20, 50, 100]" layout="total, prev, pager, next, jumper" :total="page.count"
      @current-change="handleCurrentChange" /></div>
</template>

<script setup>
import dayjs from 'dayjs'
import { ref, reactive } from 'vue';
const props = defineProps({
  tabData: Array,
  tableData: Array,
  page: Object
  // ['tabData', 'tableData', 'page']
})
const emit = defineEmits(["onEdit", "onCurrent"])
const onclick = (data, star) => {
  emit('onEdit', data, star)
}
const handleCurrentChange = (data) => {
  pages.offset = data
  console.log(pages)
  emit('onCurrent', pages)
}

let pages = reactive({
  limit: 10,
  offset: 1,
  count: 0
})
for (const key in props.page) {
  pages[key] = pages[key]
}
</script>

<style lang="less" scoped>
.page {
  display: flex;
  flex-direction: row-reverse;
  padding-top: 20px;
}
</style>